<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
</head>
<body>
<canvas id="physicsCanvas" width="500" height="350"></canvas>

<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Helper function to draw an arrow with a specific line width
    function drawArrow(ctx, fromX, fromY, toX, toY, headLength = 10, arrowLineWidth = 2) {
        const originalLineWidth = ctx.lineWidth;
        ctx.lineWidth = arrowLineWidth;
        
        const dx = toX - fromX;
        const dy = toY - fromY;
        const angle = Math.atan2(dy, dx);

        // Draw line
        ctx.beginPath();
        ctx.moveTo(fromX, fromY);
        ctx.lineTo(toX, toY);
        ctx.stroke();

        // Draw arrowhead
        ctx.beginPath();
        ctx.moveTo(toX, toY);
        ctx.lineTo(toX - headLength * Math.cos(angle - Math.PI / 6), toY - headLength * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(toX, toY);
        ctx.lineTo(toX - headLength * Math.cos(angle + Math.PI / 6), toY - headLength * Math.sin(angle + Math.PI / 6));
        ctx.stroke();

        ctx.lineWidth = originalLineWidth;
    }

    // --- Style and parameters ---
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 1.5;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    const A = { x: 80, y: 200 };
    const B = { x: 380, y: 200 };
    const alpha_deg = 30;
    const alpha_rad = alpha_deg * Math.PI / 180;
    
    const v1_len = 80;
    const v2_len = 80;

    const v1_end = { x: A.x + v1_len, y: A.y };
    const v2_end = {
        x: B.x - v2_len * Math.cos(alpha_rad),
        y: B.y - v2_len * Math.sin(alpha_rad)
    };
    
    const C_len = 220;
    const C = {
        x: B.x - C_len * Math.cos(alpha_rad),
        y: B.y - C_len * Math.sin(alpha_rad)
    };

    // --- Drawing ---

    // 1. Dashed Lines (Paths)
    ctx.beginPath();
    ctx.setLineDash([5, 5]);
    // Horizontal path (A to B)
    ctx.moveTo(A.x, A.y);
    ctx.lineTo(B.x, B.y);
    // Angled path (B to C)
    ctx.moveTo(B.x, B.y);
    ctx.lineTo(C.x, C.y);
    ctx.stroke();
    ctx.setLineDash([]);

    // 2. Solid Vectors (Arrows) on top of paths
    drawArrow(ctx, A.x, A.y, v1_end.x, v1_end.y);
    drawArrow(ctx, B.x, B.y, v2_end.x, v2_end.y);

    // 3. Labels (Points)
    ctx.font = '22px Times New Roman';
    ctx.fillText('A', A.x - 20, A.y + 5);
    ctx.fillText('B', B.x + 15, B.y + 5);
    ctx.fillText('C', C.x - 15, C.y - 15);

    // 4. Labels (Vectors)
    // v1
    ctx.font = 'italic 20px Times New Roman';
    ctx.fillText('v', A.x + v1_len / 2 - 5, A.y - 20);
    ctx.font = 'italic 14px Times New Roman';
    ctx.fillText('1', A.x + v1_len / 2 + 5, A.y - 15);

    // v2
    ctx.font = 'italic 20px Times New Roman';
    const v2_label_pos = {
        x: B.x - v2_len * 0.5 * Math.cos(alpha_rad) + 20 * Math.sin(alpha_rad),
        y: B.y - v2_len * 0.5 * Math.sin(alpha_rad) - 20 * Math.cos(alpha_rad)
    };
    ctx.fillText('v', v2_label_pos.x, v2_label_pos.y);
    ctx.font = 'italic 14px Times New Roman';
    ctx.fillText('2', v2_label_pos.x + 10, v2_label_pos.y + 5);
    
    // 5. Angle alpha
    const angle_radius = 40;
    ctx.beginPath();
    ctx.arc(B.x, B.y, angle_radius, Math.PI, Math.PI - alpha_rad, true); // Arc from horizontal left to vector v2
    ctx.stroke();
    // Label alpha
    ctx.font = 'italic 20px Times New Roman';
    const alpha_label_angle = Math.PI - alpha_rad / 2;
    ctx.fillText('α', B.x + (angle_radius * 0.6) * Math.cos(alpha_label_angle), B.y - (angle_radius * 0.6) * Math.sin(alpha_label_angle));

    // 6. Distance l marker
    const l_y = A.y + 80;
    ctx.beginPath();
    // Horizontal line
    ctx.moveTo(A.x, l_y);
    ctx.lineTo(B.x, l_y);
    // Ticks
    ctx.moveTo(A.x, l_y - 5);
    ctx.lineTo(A.x, l_y + 5);
    ctx.moveTo(B.x, l_y - 5);
    ctx.lineTo(B.x, l_y + 5);
    ctx.stroke();
    // Label l
    ctx.font = 'italic 20px Times New Roman';
    ctx.fillText('l', (A.x + B.x) / 2, l_y - 15);

    // 7. Caption
    ctx.font = '22px KaiTi'; // KaiTi is a common Chinese font style
    ctx.fillText('力图 1.11.1', (A.x + B.x) / 2, l_y + 50);

</script>
</body>
</html>